<template>
  <div class="bj material">
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="19">
          <!-- 右侧 -->
          <div class="material_right ml_30">
            <div class="mlr_40 mt_30">
              <!-- title -->
              <div class="dis_f_j_b pb_29 bor_bottom">
                <div class="dis_f">
                  <div class="actives ml_7"></div>
                  <div class="color_333 font_18">我的课程</div>
                </div>
                <div class="font_14 course color">
                  <i class="el-icon-s-order color"></i>
                  课程表
                </div>
              </div>
              <!-- kecheng -->
              <div class="dis_f mt_30">
                <div class="course_list">
                  <div>
                    <img src="../../static/image/test.jpg" width="269" height="153" />
                  </div>
                  <div class="font_16 color_4848">市政管理工程--名师护航班</div>
                  <div class="dis_f_j_b font_14 color_9797 mt_20">
                    <div class="ml-15">主讲：韩老师</div>

                 <div class="dis_f mr_20 ">
                   <img src="../../static/image/xueyuan@2x.png" style="margin-top: 3px;" class="ml_7" width="16" height="14"/>
                   <div >1234</div>
                 </div>
                  </div>
                </div>
                <div class="course_list">
                  <div>
                    <img src="../../static/image/test.jpg" width="269" height="153" />
                  </div>
                  <div class="font_16 color_4848">市政管理工程--名师护航班</div>
                  <div class="dis_f_j_b font_14 color_9797 mt_20">
                    <div class="ml-15">主讲：韩老师</div>

                 <div class="dis_f mr_20 ">
                   <img src="../../static/image/xueyuan@2x.png" style="margin-top: 3px;" class="ml_7" width="16" height="14"/>
                   <div >1234</div>
                 </div>
                  </div>
                </div>
                 <div class="course_list">
                  <div>
                    <img src="../../static/image/test.jpg" width="269" height="153" />
                  </div>
                  <div class="font_16 color_4848">市政管理工程--名师护航班</div>
                  <div class="dis_f_j_b font_14 color_9797 mt_20">
                    <div class="ml-15">主讲：韩老师</div>

                 <div class="dis_f mr_20 ">
                   <img src="../../static/image/xueyuan@2x.png" style="margin-top: 3px;" class="ml_7" width="16" height="14"/>
                   <div >1234</div>
                 </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Element from "element-ui";

export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: ""
    };
  },
  methods: {
  }
};
</script>

<style scoped lang='less'>
.mt_20{
  margin-top: 20px;
}
.mr_20{
  margin-right: 20px;
}
.ml-15{
  margin-left: 15px;
}
.color_9797{
  color: #979797;
}
.color_4848{
  color: #484848;
  margin-top: 24px;
  margin-left: 16px;
}

.course_list {
  width: 269px;
  height: 257px;
  border: 1px solid;
  margin-right: 30px;
background:rgba(255,255,255,1);
border:1px solid rgba(193,193,193,0.18);
overflow: hidden;
border-radius:4px 4px 4px 4px;

}
.course_list:hover{
box-shadow:0px 12px 26px 3px rgba(184,200,212,0.21);
}

.course_list:nth-last-child(1) {
  margin-right: 0px;
}
.course {
  width: 88px;
  height: 34px;
  border: 1px solid rgba(39, 164, 254, 1);
  line-height: 34px;
  text-align: center;
}
.color_F1616 {
  color: #ff1616;
}
.ml_10 {
  margin-left: 10px;
}
.color_999 {
  color: #999;
}
.ml_23 {
  margin-left: 23px;
}
.ml {
  margin-left: 10px;
}
.color {
  color: #27a4fe;
}
.font_14 {
  font-size: 14px;
}
.color_666 {
  color: #666;
}
.bj {
  background: #f3f3f3;
  overflow: hidden;
  padding-bottom: 34px;
}
.mt_30 {
  margin-top: 30px;
}
.material_left {
  height: 565px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.portrait_images {
  width: 74px;
  height: 85px;
  margin: auto;
  border: 1px solid;
  margin-top: 30px;
}
.telephone {
  font-size: 16px;
  color: #444343;
  margin-top: 17px;
  text-align: center;
}
.text {
  color: #999;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
.edit_img {
  text-align: center;
  padding-top: 11px;
}
.el-menu-item.is-active {
  color: #27a4fe;
  border-left: 2px solid #27a4fe;
  background: rgba(39, 164, 254, 0.1);
}
.ml_7 {
  margin-right: 7px;
}

.mt_50 {
  margin-top: 50px;
}
.el-menu-item {
  text-align: center;
}
.material_right {
  height: 565px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.mlr_40 {
  margin-left: 40px;
  margin-right: 40px;
}
.actives {
  width: 4px;
  height: 18px;
  background: rgba(39, 164, 254, 1);
  margin-top: 4px;
}
.dis_f {
  display: flex;
}
.pb_29 {
  padding-bottom: 29px;
}
.bor_bottom {
  border-bottom: 1px dashed rgba(153, 153, 153, 0.1);
}
.color_333 {
  color: #333;
}
.font_18 {
  font-size: 18px;
}
.font_16 {
  font-size: 16px;
}
.dis_f_j_b {
  display: flex;
  justify-content: space-between;
}
.mt_38 {
  margin-top: 30px;
}
.mt_10 {
  margin-top: 10px;
}
.ma_button {
  width: 88px;
  height: 34px;
  border: 1px solid rgba(39, 164, 254, 1);
  color: #27a4fe;
  line-height: 34px;
  text-align: center;
}
</style>